<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
</head>
<body>
    <div style="float: left;width: 50%;height:700px;overflow-y: auto;background-color: coral">
        <h3>src属性:图像的url</h3>
        <img src="./asserts/test1.jpg" style="width: 40%;height: auto;max-width: 50%" alt="test1.jpg">
		<div style="width: 40%;height: auto;max-width: 50%" >
			<img src="./asserts/test1.jpg" alt="test1.jpg" style="width:100%;">
		</div>
        <h3>alt属性：可以在图像显示失败时用字体代替</h3>
        <img src="./asserts/test1.jpg" style="width: 40%;height: auto;max-width: 50%" alt="test1.jpg">
        <h3>title属性：鼠标放上图片可以提示字体</h3>
        <img src="./asserts/test1.jpg" style="width: 40%;height: auto;max-width: 50%" title="test1.jpg">
    </div>
    <div style="float: left;width: 50%">
        <table border="1">
            <tr>
                <th>
                    几个基础属性
                </th>
                <th>
                    属性值
                </th>
                <th>
                    说明
                </th>
            </tr>
            <tr>
                <td>src</td>
                <td>图片路径</td>
                <td>必须属性</td>
            </tr>
            <tr>
                <td>alt</td>
                <td>文本</td>
                <td>可以在图像显示失败时用字体代替</td>
            </tr>
            <tr>
                <td>title</td>
                <td>文本</td>
                <td>鼠标放上图片可以提示字体</td>
            </tr>
            <tr>
                <td>width</td>
                <td>像素</td>
                <td>设置图像宽度</td>
            </tr>
            <tr>
                <td>height</td>
                <td>像素</td>
                <td>设置图像高度</td>
            </tr>
            <tr>
                <td>border</td>
                <td>像素</td>
                <td>设置图片边框粗细</td>
            </tr>
        </table>
    </div>
</body>
</html>
